<template>
  <div class="article">
    <!-- 1.0 头部导航 -->
    <van-nav-bar
      :title="article.type === 1 ? '文章详情' : '视频'"
      left-text="返回"
      left-arrow
      class="header"
      @click-left="$router.back()"
    >
      <template #left>
        <van-icon class="arrow-left" name="arrow-left" />
        <i class="iconfont iconnew"></i>
      </template>
      <template #right>
        <van-button
          round
          :type="article.has_follow ? 'default' : 'danger'"
          size="mini"
          @click="followBtn"
          >{{ article.has_follow ? "已关注" : "+ 关注" }}</van-button
        >
      </template>
    </van-nav-bar>
    <!-- 2.1 文章内容 -->
    <div v-if="article.type === 1" class="article-main">
      <h1 class="title">{{ article.title }}</h1>
      <!-- 🔔 && 如果左值为 true 值，继续往后运行，后面的就是数据 -->
      <p class="author">
        {{ article.user && article.user.nickname }}
        {{ article.create_date | formatDate }}
      </p>
      <!-- 🔔 v-html 用于展示 HTML 布局 -->
      <article class="article-in" v-html="article.content"></article>
    </div>
    <!-- 2.2 视频内容 -->
    <div v-else class="video-main">
      <!-- 2.2.1 视频 -->
      <div class="video-group">
        <!-- 
          PS: 梨视频网站的视频大家可以谁便拿(会审查元素就行)
            1. poster     封面照骗  
            2. src        视频播放真实地址
            3. controls   操作栏()
        -->
        <video
          class="video"
          :poster="article.cover && article.cover[0].url"
          :src="'https://video.pearvideo.com/mp4/third/20210702/cont-1734086-10054243-203058-hd.mp4'"
          controls
        ></video>
        <!-- <i class="iconfont iconshipin"></i> -->
      </div>
      <div class="userinfo">
        <van-image
          class="avatar"
          round
          :src="article.user && article.user.head_img | imgUrl"
        ></van-image>
        <span class="nickname">{{
          article.user && article.user.nickname
        }}</span>
        <van-button
          round
          :type="article.has_follow ? 'default' : 'danger'"
          size="mini"
          @click="followBtn"
          >{{ article.has_follow ? "已关注" : "+ 关注" }}</van-button
        >
      </div>
    </div>
    <!-- 3.0 点赞和分享操作 -->
    <div class="operate">
      <div class="btn" @click="likeFn" :class="{ active: article.has_like }">
        <i class="iconfont icondianzan"></i>
        <span>{{ article.like_length }}</span>
      </div>
      <div class="btn">
        <i class="iconfont iconweixin"></i>
        <span>微信</span>
      </div>
    </div>
    <!-- 4.0 底部评论 - 组件 -->
    <MyComment :article="article"></MyComment>
  </div>
</template>

<script>
import { getPostDetailByIdAPI } from "../apis/news";
import { userFollowsByIdAPI, userUnFollowsByIdAPI } from "../apis/user";
import { updatePostLikeByIdAPI } from "../apis/news";
import MyComment from "../components/MyComment.vue";
export default {
  components: {
    MyComment,
  },
  data() {
    return {
      // 为了方便，把路由的 id 存起来
      id: this.$route.params.id,
      // 文章对象
      article: {},
    };
  },
  // 组件初始化完成
  async created() {
    // 根据 id 获取文章详情
    const res = await getPostDetailByIdAPI(this.id);
    console.log(res);
    // 数据绑定，用于页面展示数据
    this.article = res.data.data;
  },
  methods: {
    async followBtn() {
      // 有两种情况： has_follow: true / false
      //  1. 如果是已经关注，调用取消关注的API
      if (this.article.has_follow) {
        // 💥 注意这里是用户的 id（不是文章的id）
        const res = await userUnFollowsByIdAPI(this.article.user.id);
        // console.log(111111, res);
        this.$toast.fail(res.data.message);
      } else {
        //  2. 如果是未关注，调用关注的API
        const res = await userFollowsByIdAPI(this.article.user.id);
        // console.log(2222222, res);
        this.$toast.success(res.data.message);
      }
      // 🔔 由于页面没有刷新，所以需要主动修改 Vue 绑定的数据
      this.article.has_follow = !this.article.has_follow;
    },
    async likeFn() {
      // 💥 注意这里是传递文章 id，对文章点赞或取消点赞
      const res = await updatePostLikeByIdAPI(this.article.id);
      // console.log(res);
      if (res.data.message === "点赞成功") {
        this.article.like_length++;
        this.$toast.success(res.data.message);
      } else {
        this.article.like_length--;
        this.$toast.fail(res.data.message);
      }
      // 状态的变化，用来更新图标颜色
      this.article.has_like = !this.article.has_like;
    },
  },
};
</script>

<style lang="less" scoped>
// 没有添加 scoped 表示全局样式
//  添加了 scoped 后，到底做了什么事情？？
//     1. 模板中标签自动添加 => <标签名 data-v-xxx class="box">
//     2. 选择器自动添加 => .box[data-v-82768ea8]
.header {
  .arrow-left {
    font-size: 20px;
    color: #000;
  }
  .iconnew {
    font-size: 50px;
  }
}
.article-main {
  padding: 10px;
  .title {
    font-size: 16px;
    font-weight: bold;
    margin: 10px 0;
  }
  .author {
    font-size: 13px;
    margin-bottom: 20px;
    color: #666;
  }
  // 添加了 /deep/ 后，当前选择器和其后代选择器，都不会添加 [data-v-xxx] 了
  /deep/ .article-in {
    font-size: 13px;
    img {
      width: 100%;
    }
    p {
      text-indent: 2em;
      line-height: 1.5;
      margin: 0.2em;
    }
    .photo {
      text-align: center;
    }
  }
}
.operate {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100px;
  .btn {
    width: 80px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    .iconweixin {
      color: #26ce26;
    }
  }
  .active {
    border-color: red;
    color: red;
  }
}

// 视频页面
.video-main {
  .video-group {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    .video {
      width: 100%;
      height: 300px;
      background-color: #666;
    }

    .iconshipin {
      font-size: 50px;
      color: #fff;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.5);
      position: absolute;
      z-index: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .userinfo {
    display: flex;
    height: 50px;
    align-items: center;
    padding: 10px;
    .avatar {
      width: 25px;
      height: 25px;
      margin-right: 10px;
    }
    .nickname {
      flex: 1;
    }
  }
}
</style>